<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="LibreSBC - Open Source Session Border Controler">
    <meta name="author" content="hnimminh">
    <title>LibreSBC</title>
    <!-- FONT ––––––––––––––––––––––––––––––––––––––––––––––––––------------ -->
    <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
    <!-- CSS ––––––––––––––––––––––––––––––––––––––––––––––––––------------- -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/customize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <!-- FAVICON ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
    <link rel="icon" type="image/png" href="assets/images/favicon.ico">
    <meta name="theme-color" content="#fcba03">
  </head>
  <body onload="GetPresentNode();">
    <!-- HEADER ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
    <div class="py-1 mb-4 border-bottom">
      <header class="container d-flex flex-wrap justify-content-center ">
        <a href="" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
          <img class="d-flex align-items-center text-dark text-decoration-none" width="44" src="/assets/images/default.png" alt="LibreSBC">
          <span class="fs-4 fw-lighter text-muted">&nbsp;libresbc</span>
        </a>
        <ul class="nav nav-pills">
          <!-- HOME -->
          <li class="nav-item">
            <a href="" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="false" onclick="GetPresentNode();">
              Node Home</a>
          </li>
          <!-- BASE -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Bases</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" id="cfg-netlias-base-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-netalias-base" type="button" role="tab" aria-controls="nav-cfg-netalias-base" aria-selected="false" href="" onclick="GeneralGetPresent('NetAlias');">NetAlias</a></li>
              <li><a class="dropdown-item" id="cfg--tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-acl-base" type="button" role="tab" aria-controls="nav-cfg-acl-base" aria-selected="false" href="" onclick="GeneralGetPresent('AccessControl');">Access Control</a></li>
            </ul>
          </li>
          <!-- CLASS -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Class</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" id="cfg-media-class-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-media-class" type="button" role="tab" aria-controls="nav-cfg-media-class" aria-selected="false" href="" onclick="GeneralGetPresent('MediaClass');">Media Class</a></li>
              <li><a class="dropdown-item" id="cfg-capacity-class-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-capacity-class" type="button" role="tab" aria-controls="nav-cfg-capacity-class" aria-selected="false" href="" onclick="GeneralGetPresent('CapacityClass');">Capacity Class</a></li>
              <li><a class="dropdown-item" id="cfg-translation-class-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-translation-class" type="button" role="tab" aria-controls="nav-cfg-translation-class" aria-selected="false" href="" onclick="GeneralGetPresent('TranslationClass');">Translation Class</a></li>
              <li><a class="dropdown-item" id="cfg-manipulation-class-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-manipulation-class" type="button" role="tab" aria-controls="nav-cfg-manipulation-class" aria-selected="false" href="" onclick="GeneralGetPresent('ManipulationClass');">Manipulation Class</a></li>
              <li><a class="dropdown-item" id="cfg-preanswer-class-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-preanswer-class" type="button" role="tab" aria-controls="nav-cfg-preanswer-class" aria-selected="false" href="" onclick="GeneralGetPresent('PreAnswerClass');">PreAnswer Class</a></li>
            </ul>
          </li>
          <!-- INTERCONNECTION -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Connections</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" id="cfg-sipprofile-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-sipprofile" type="button" 
                role="tab" aria-controls="nav-cfg-sipprofile" aria-selected="false" href="" onclick="GeneralGetPresent('SIPProfile');">SIP Profile</a></li>
              <li><a class="dropdown-item" id="cfg-inbound-intcon-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-inbound-intcon" type="button" 
                role="tab" aria-controls="nav-cfg-inbound-intcon" aria-selected="false" href="" onclick="GeneralGetPresent('Inbound');">Inbound Interconnect</a></li>
              <li><a class="dropdown-item" id="cfg-outbound-intcon-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-outbound-intcon" type="button" 
                role="tab" aria-controls="nav-cfg-outbound-intcon" aria-selected="false" href="" onclick="GeneralGetPresent('Outbound');">Outbound Interconnect</a></li>
              <li><a class="dropdown-item" id="cfg-gateway-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-gateway" type="button" 
                role="tab" aria-controls="nav-cfg-gateway" aria-selected="false" href="" onclick="GeneralGetPresent('Gateway');">SIP Gateway</a></li>
              <li><a class="dropdown-item" id="cfg-access-domain-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-access-domain" type="button"
                  role="tab" aria-controls="nav-cfg-access-domain" aria-selected="false" href="" onclick="GeneralGetPresent('AccessDomainPolicy');">Access Domain</a></li>
              <li><a class="dropdown-item" id="cfg-access-service-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-access-service" type="button" 
                role="tab" aria-controls="nav-cfg-access-service" aria-selected="false" href="" onclick="GeneralGetPresent('AccessService');">Access Service</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link" id="cfg-routing-tab" data-bs-toggle="tab" data-bs-target="#nav-cfg-routing" type="button" 
            role="tab" aria-controls="nav-cfg-routing" aria-selected="false" onclick="GeneralGetPresent('RoutingTable');">Routing</a>
          </li>
          <li class="nav-item">
            <a href="/apidocs" class="nav-link"  type="button" role="tab"><i class="fa  fa-info-circle"></i></a>
          </li>
        </ul>
      </header>
    </div>
    <!-- PAGE ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
    <div class="container mx-auto p-3 py-md-5">
      <div class="container">
        <main>
          <!----- BEGIN: TOAST -->
          <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
            <div id="toastmsg" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3500">
              <div class="d-flex">
                <div class="toast-body" id="event-message"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
            </div>
          </div>
          <!----- END: TOAST -->
          <div class="tab-content" id="nav-tabContent">
            <!--##### HOME --->
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="home-tab">
              <div class="py-1 text-center">
                <h3>Home</h3>
              </div>
              <hr>
              <div class="col-md-12 col-lg-12 py-3">
                <div class="row">
                  <div class="col-md-6 g-3 py-2">
                    <ul class="list-group" id="node-info">
                    </ul>
                  </div>
                  <div class="col-md-6 g-3 py-2">
                    <ul class="list-group" id="cluster-info">
                    </ul>
                    <br>
                    <button type="button" class="btn btn-outline-danger" onclick="GeneralModify('', 'Cluster');"><i class="fa fa-connectdevelop"></i> Redefine Cluster</button>
                  </div>
                </div>
              </div>
            </div>
            <!--##### BASE --->
            <div class="tab-pane fade" id="nav-cfg-netalias-base" role="tabpanel" aria-labelledby="cfg-netalias-base-tab">
              <div class="py-1 text-center">
                <h3>NetAlias </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('NetAlias');"> <i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="netalias-table">
                <!-- NET ALIAS -->
              </div>
            </div>
            <div class="tab-pane fade" id="nav-cfg-acl-base" role="tabpanel" aria-labelledby="cfg-acl-base-tab">
              <div class="py-1 text-center">
                <h3>Network Control List </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('AccessControl');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="acl-table">
                <!-- ACCESS CONTROL -->
              </div>
            </div>
            <!--##### CLASS MEDIA-->
            <div class="tab-pane fade" id="nav-cfg-media-class" role="tabpanel" aria-labelledby="cfg-media-class-tab">
              <div class="py-1 text-center">
                <h3>Media Class </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('MediaClass');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="media-class-table">
                <!-- MEDIA CLASS -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-capacity-class" role="tabpanel" aria-labelledby="cfg-capacity-class-tab">
              <div class="py-1 text-center">
                <h3>Capacity Class </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('CapacityClass');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="capacity-class-table">
                <!-- CAPACITY CLASS -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-translation-class" role="tabpanel" aria-labelledby="cfg-translation-class-tab">
              <div class="py-1 text-center">
                <h3>Translation Rules </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('TranslationClass');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="translation-class-table">
                <!-- TRANSLATIONS CLASS -->
              </div>
            </div>
            <div class="tab-pane fade" id="nav-cfg-manipulation-class" role="tabpanel" aria-labelledby="cfg-manipulation-class-tab">
              <div class="py-1 text-center">
                <h3>Manipulation Rules </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('ManipulationClass');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="manipulation-class-table">
                <!-- MANIPULATION CLASS -->
              </div>
            </div>
            <div class="tab-pane fade" id="nav-cfg-preanswer-class" role="tabpanel" aria-labelledby="cfg-preanswer-class-tab">
              <div class="py-1 text-center">
                <h3>PreAnswer Class </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('PreAnswerClass');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="preanswer-class-table">
                <!-- PREANSWER CLASS -->
              </div>
            </div>
            <!--##### INTERCONNECTION -->
            <div class="tab-pane fade" id="nav-cfg-sipprofile" role="tabpanel" aria-labelledby="cfg-sipprofile-tab">
              <div class="py-1 text-center">
                <h3>SIP Profile </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('SIPProfile');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="sipprofile-table">
                <!-- SIP PROFILE -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-inbound-intcon" role="tabpanel" aria-labelledby="cfg-inbound-intcon-tab">
              <div class="py-1 text-center">
                <h3>Inbound Interconnect </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('Inbound');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="inbound-intcon-table">
                <!-- INBOUND INTERCONNECT -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-outbound-intcon" role="tabpanel" aria-labelledby="cfg-outbound-intcon-tab">
              <div class="py-1 text-center">
                <h3>Outbound Interconnect </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('Outbound');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="outbound-intcon-table">
                <!-- OUTBOUND INTERCONNECT -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-gateway" role="tabpanel" aria-labelledby="cfg-gateway-tab">
              <div class="py-1 text-center">
                <h3>Gateway </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('Gateway');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="gateway-table">
                <!-- GATEWAY INTERCONNECT -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-access-domain" role="tabpanel" aria-labelledby="cfg-access-domain-tab">
              <div class="py-1 text-center">
                <h3>Access Domain</h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('AccessDomainPolicy');"><i class="fa fa-plus-square"></i> Create </button>
              <br><br>
              <div class="accordion" id="access-domain-presentation-object">
                <!-- ACCESS DOMAIN -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-access-service" role="tabpanel" aria-labelledby="cfg-access-service-tab">
              <div class="py-1 text-center">
                <h3>Access Service </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('AccessService');"><i class="fa fa-plus-square"></i> Create </button>
              <div class="col-md-12 my-5" id="access-service-table">
                <!-- ACCESS SERVICE -->
              </div>           
            </div>
            <div class="tab-pane fade" id="nav-cfg-routing" role="tabpanel" aria-labelledby="cfg-routing-tab">
              <div class="py-1 text-center">
                <h3>Routing </h3>
              </div>
              <hr>
              <button type="button" class="btn btn-primary" onclick="GeneralCreate('RoutingTable');"><i class="fa fa-plus-square"></i> Create </button>
              <br><br>
              <!--- BEGIN: ROUTING DATA -->
              <div class="accordion" id="routing-presentation-object">
                <!-- ROUTING DATA -->
              </div>
              <!--- END: ROUTING DATA -->                
            </div>
            <!-- END -->
          </div>
          <!--- PROGRESS BAR -->
          <hr>
          <div id="progessdot" class="invisible">
            <div class="d-flex justify-content-center">
              <div class="spinner-grow text-primary" role="status"></div>
              <div class="spinner-grow text-danger" role="status"></div>
              <div class="spinner-grow text-warning" role="status"></div>
            </div>
          </div>
          <!----- BEGIN: CANVAS -->
          <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="true" tabindex="0" id="offcanvaspanel" aria-labelledby="offcanvaspanel-label">
            <div class="offcanvas-header">
              <h5 class="offcanvas-title" id="offcanvaspanel-label"></h5>
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
              <div class="col-md-12 col-lg-12 py-3">
                <div id="offcanvas-content" class="row">
                  <div class="col-md-12 col-lg-12">
                    <textarea class="form-control" id="config-detail" is="highlighted-code" rows="30" language="json" tab-size="4"></textarea>
                    <br>
                    <button type="button" class="btn btn-danger" onclick="PrettyCode();"><i class="fa fa-code"></i></button>
                    <button type="button" class="btn btn-primary" id="config-submit" onclick=""><i class="fa fa-play"></i> Submit</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!----- END: CANVAS -->
        </main>
        <!-- FOOTER ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
        <footer class="my-1 pt-5 text-muted text-center text-small">
          <p class="mb-1">&copy; 2023 <span><a href="https://github.com/hnimminh/libresbc">LIBRESBC</a>🗽</span></p>
          <br>
          <div class="alert alert-light alert-dismissible fade show text-muted" role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" 
              data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="custom-tooltip"
              data-bs-title="<em>Dismiss! <br> please let me (libresbc) know if this is not appropriate for you</em>"
              onclick="$('.tooltip').remove();">
            </button>
            <p><em>
              Your support allows me to create a free software that secure your voice infrastructure and worry-free experience.
              Help us keep LibreSBC going for years to come and get access to more features.
            </em></p>
            <a href="https://github.com/sponsors/hnimminh" class="btn btn-outline-danger" tabindex="-1"><i class="fa fa-heart"></i><code> Support</code></a>
          </div>
        </footer>
      </div>
    </div>
    <!-- SCRIPTS ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="assets/js/site.js"></script>
  <!-- END ––––––––––––––––––––––––––––––––––––––––––––––––––--------- -->
  </body>
</html>
